import Vue from "vue";
//相当于通过script 引入 vue.js
//单文件组件 一个...vue 文件就是一个组件
import App from "./App.vue";
// 入口文件
// vue的全局配置详情 看api
Vue.config.productionTip = true;
// 通过render创建app组件的虚拟dom挂在到 index.html 的 #hehe元素上

// 创建一个全局自定义指令
Vue.directive("hehe", {
  inserted(el) {
    el.focus();
  },
});
new Vue({
  render: (h) => h(App),
  // render: (createElement) => {
  //   return createElement("div", { attrs: { id: "hehe" }, class: "blue" }, [
  //     "hehe",
  //     createElement("p", {}, "这里是p元素"),
  //   ]);
  // },
  // render: (createElement) => {
  //   return createElement(App);
  // },
  // render: (h) => {
  //   return h(App);
  // },
  // render: (h) => {
  //   return (
  //     <div id="456" class="789">
  //       1233
  //       <p>123</p>
  //     </div>
  //   );
  // },
}).$mount("#hehe");

// new Vue({
//   el: "#hehe",
// })
// vue中的渲染机制 将模版编译成 -》 渲染函数 -》虚拟dom
/*
<template>
  <div id="hehe" class="blue">
    hehe
    <p>这里是p元素</p>
  </div>
</template>
{
  tag: "div",
  attr: {
    id: "hehe",
  },
  children: [
    ....
  ]
}
createElement 渲染函数 创建虚拟dom 
createElement('标签名',属性对象,子节点)
会用h代表createElement

// 创建虚拟dom的的3中方式
1.  模版
2.  渲染函数
3.  jsx语法
*/
